<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText"></topTitle>
    <div class="mainCon">
      <div class="reminderBox" v-if="roleHandle">
        <ul class="reminder">
          <li>
            <span>1</span>
            <el-tooltip content="Top center" placement="top" effect="dark">
              <div slot="content">
                企业因未落实条例要求，系统会自动
                <br />产生预警，并通知企业
              </div>
              <div id="heightBox">
                企业因未落实条例要求，系统会自动产生预警，并通知企业
              </div>
            </el-tooltip>
          </li>
          <li class="arrowRight">
            <img src="../../../static/img/icon2.png" alt="" />
          </li>
          <li>
            <span>2</span>
            <div>根据企业处理预警的实际情况，酌情添加处罚痕迹</div>
          </li>
          <li class="arrowRight">
            <img src="../../../static/img/icon2.png" alt="" />
          </li>
          <li>
            <span>3</span>
            <div>
              系统根据企业处理结果自动消除预警
              <el-tooltip content="Top center" placement="top" effect="dark">
                <div slot="content">
                  如部分预警企业线下处理，无法在系统中体现，
                  <br />可根据企业提供的相关凭证，由监管方手动消除预警。
                </div>
                <i class="icon iconfont iconhuabanfuben"></i>
              </el-tooltip>
            </div>
          </li>
        </ul>
      </div>
      <div class="reminderBox" v-if="!roleHandle">
        <ul class="reminder">
          <li>
            <span>1</span>
            <div id="heightBox">
              企业因未落实条例要求，系统会自动产生预警，并通知企业
            </div>
          </li>
          <li class="arrowRight">
            <img src="../../../static/img/icon2.png" alt="" />
          </li>
          <li>
            <span>2</span>
            <div>根据企业处理情况添加处置记录</div>
          </li>
          <li class="arrowRight">
            <img src="../../../static/img/icon2.png" alt="" />
          </li>
          <li>
            <span>3</span>
            <div>
              系统根据企业处理结果自动消除预警
              <el-tooltip content="Top center" placement="top" effect="dark">
                <div slot="content">
                  如部分预警企业已线下处理，无法在系统中体现，<br />可根据企业提供的相关凭证手动消除预警
                </div>
                <i class="icon iconfont iconhuabanfuben"></i>
              </el-tooltip>
            </div>
          </li>
        </ul>
      </div>
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <!-- 监察端 -->
        <template v-if="roleHandle">
          <el-form :inline="true" :model="filterField" ref="searchConditions">
            <el-col :lg="8" :xl="6">
              <el-form-item label="项目名称" class="row-padding-bottom">
                <el-input
                  placeholder="请填写项目完整名称"
                  @blur="filterField.projectName = changeValue($event)"
                  clearable
                  v-model="filterField.projectName"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6" v-show="roleHandle">
              <el-form-item label="区域" class="row-padding-bottom">
                <el-cascader
                  v-model="areaId"
                  :options="areasOptions"
                  @change="getAreaId"
                  clearable
                  filterable
                  :props="{ checkStrictly: true }"
                  :append-to-body="false"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <template v-if="advanced">
              <el-col :lg="8" :xl="6">
                <el-form-item label="行业" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.industryId"
                    filterable
                    placeholder="请选择"
                    clearable
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="item in industryOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="预警类型" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.typeId"
                    clearable
                    filterable
                    placeholder="请选择"
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="item in typeOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="处理状态" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.status"
                    clearable
                    filterable
                    placeholder="请选择"
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="item in stateOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="是否处罚" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.isPunished"
                    clearable
                    filterable
                    placeholder="请选择"
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="item in isPunishOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="处理方式" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.handleType"
                    clearable
                    filterable
                    placeholder="请选择"
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="item in wayOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="预警时间" class="row-padding-bottom">
                  <timeSelection
                    :startTime="filterField.effectiveStartDate"
                    :endTime="filterField.effectiveEndDate"
                    @getStartTimeValue="getStartTimeValue"
                    @getEndTimeValue="getEndTimeValue"
                  ></timeSelection>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="开工状态" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.projectStatus"
                    filterable
                    placeholder="请选择"
                    clearable
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6" v-if="isCzUser()">
                <el-form-item label="消除时间" class="row-padding-bottom">
                  <timeSelection
                    @getStartTimeValue="getRemoveStartTime"
                    @getEndTimeValue="getRemoveEndTime"
                    :startTimeTitle="startTimeTitleTwo"
                    :endTimeTitle="endTimeTitleTwo"
                  ></timeSelection>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item
                  label="网格中心处理情况"
                  class="row-padding-bottom gridLabel"
                >
                  <el-select
                    v-model="filterField.gridAlertStatus"
                    filterable
                    placeholder="请选择"
                    clearable
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="item in girdStatusList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </template>
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <!-- <exportBtn v-if="!(loginType == 'JC'||loginType=='BANK' && isShowDelete)" :dataLen="tableList.length" :filterField="filterField" :api="api"></exportBtn> -->
              <!-- <el-button
                v-if="loginType == 'JC'||loginType=='BANK' && isShowDelete"
                class="commonBut saveBtn funComBut outEmployee"
                v-sdc
                @click="goEliminateAlert"
            >
                <span class="opetareText">批量消除</span>
            </el-button> -->
            </el-form-item>
            <!-- <el-form-item>
              <el-link :underline="false" type="primary" v-if="loginType == 'JC'||loginType=='BANK'" @click="showPrivilege">预警消除权限</el-link>
          </el-form-item> -->

            <!-- </el-form-item>
          </el-col> -->
          </el-form>
        </template>
        <!-- 企业端 -->
        <template v-if="!roleHandle">
          <el-form :inline="true" :model="filterField" ref="searchConditions">
            <el-col :lg="8" :xl="6">
              <el-form-item label="项目名称" class="row-padding-bottom">
                <el-input
                  placeholder="请填写项目完整名称"
                  @blur="filterField.projectName = changeValue($event)"
                  clearable
                  v-model="filterField.projectName"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6" v-show="roleHandle">
              <el-form-item label="区域" class="row-padding-bottom">
                <el-cascader
                  v-model="areaId"
                  :options="areasOptions"
                  @change="getAreaId"
                  clearable
                  filterable
                  :props="{ checkStrictly: true }"
                  :append-to-body="false"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="行业" class="row-padding-bottom">
                <el-select
                  v-model="filterField.industryId"
                  filterable
                  placeholder="请选择"
                  clearable
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in industryOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <template v-if="advanced">
              <el-col :lg="8" :xl="6">
                <el-form-item label="预警类型" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.typeId"
                    clearable
                    filterable
                    placeholder="请选择"
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="item in typeOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="处理状态" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.status"
                    clearable
                    filterable
                    placeholder="请选择"
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="item in stateOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="是否处罚" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.isPunished"
                    clearable
                    filterable
                    placeholder="请选择"
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="item in isPunishOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="处理方式" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.handleType"
                    clearable
                    filterable
                    placeholder="请选择"
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="item in wayOptions"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="预警时间" class="row-padding-bottom">
                  <timeSelection
                    @getStartTimeValue="getStartTimeValue"
                    @getEndTimeValue="getEndTimeValue"
                  ></timeSelection>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-form-item label="开工状态" class="row-padding-bottom">
                  <el-select
                    v-model="filterField.projectStatus"
                    filterable
                    placeholder="请选择"
                    clearable
                    :popper-append-to-body="false"
                  >
                    <el-option
                      v-for="item in statusOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xl="6" v-if="isCzUser()">
                <el-form-item label="消除时间" class="row-padding-bottom">
                  <timeSelection
                    @getStartTimeValue="getRemoveStartTime"
                    @getEndTimeValue="getRemoveEndTime"
                    :startTimeTitle="startTimeTitleTwo"
                    :endTimeTitle="endTimeTitleTwo"
                  ></timeSelection>
                </el-form-item>
              </el-col>
            </template>
            <el-col :lg="8" :xl="6">
              <el-form-item label="">
                <a
                  @click="toggleAdvanced"
                  style="margin-left: 40px; color: #409eff; cursor: pointer"
                  class="btnColor"
                >
                  {{ advanced ? '收起' : '展开' }}
                  <i
                    :class="
                      advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                    "
                  ></i>
                </a>
                <el-button
                  type="primary"
                  icon="icon iconfont iconchazhao1"
                  @click="searchList"
                  class="searchBtn"
                >
                  <span>搜索</span>
                </el-button>
                <div
                  style="display: inline-block; margin-left: 6px"
                  v-if="!roleHandle || loginType == 'QY'"
                >
                  <exportBtn
                    :dataLen="tableList.length"
                    :filterField="filterField"
                    :api="api"
                  ></exportBtn>
                </div>
                <!-- <exportBtn v-if="!(loginType == 'JC' && isShowDelete)" :dataLen="tableList.length" :filterField="filterField" :api="api"></exportBtn> -->
              </el-form-item>
            </el-col>
            <!-- <el-form-item> -->
            <!-- <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              class="commonBtn"
              @click="searchList"
            ></el-button> -->
            <!-- 监察增加批量消除预警 -->
            <!-- <el-button
                v-if="loginType == 'JC' && isShowDelete"
                class="commonBut saveBtn funComBut outEmployee"
                v-sdc
                @click="goEliminateAlert"
            >
                <span class="opetareText">批量消除</span>
            </el-button> -->
            <!-- </el-form-item> -->
            <!-- <el-form-item>
              <el-link :underline="false" type="primary" v-if="loginType == 'JC'" @click="showPrivilege">预警消除权限</el-link>
          </el-form-item> -->
          </el-form>
        </template>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div
          v-if="
            roleHandle &&
            (loginType == 'JC' || (loginType == 'BANK' && isShowDelete))
          "
          class="esGrid"
        >
          <exportBtn
            :dataLen="tableList.length"
            :filterField="filterField"
            :api="api"
          ></exportBtn>
          <el-button
            class="commonBut saveBtn funComBut outEmployee"
            v-sdc
            @click="goEliminateAlert"
          >
            <span class="opetareText">批量消除</span>
          </el-button>
          <el-button
            v-if="isEsUser()"
            class="commonBut saveBtn funComBut"
            v-sdc
            @click="toBirdCenter"
          >
            <span class="opetareText">分配至网格中心</span>
          </el-button>
          <el-link
            type="primary"
            v-if="loginType == 'JC' || loginType == 'BANK'"
            @click="showPrivilege"
            style="margin-left: 8px"
            >预警消除权限</el-link
          >
        </div>

        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          @selection-change="handleSelectionChange"
          tooltip-effect="dark"
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          v-loading="loading"
          stripe
          style="border: 1px solid #dfe6ec"
          border
          @sort-change="sortChange"
          @header-dragend="handleDragend"
        >
          <el-table-column
            type="selection"
            width="55"
            v-if="loginType == 'JC' || loginType == 'BANK'"
          >
          </el-table-column>
          <el-table-column
            v-if="roleHandle"
            prop="projectName"
            label="项目名称"
            width="230"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="industryName"
            v-if="roleHandle"
            label="行业"
            align="center"
            :formatter="formatTd"
            min-width="140"
          />
          <el-table-column
            prop="areaDetailDesc"
            label="区域"
            align="center"
            :formatter="formatTd"
            v-if="roleHandle"
            min-width="200"
          ></el-table-column>
          <el-table-column
            prop="typeName"
            label="预警类型"
            :align="roleHandle ? 'center' : 'left'"
            :formatter="formatTd"
            min-width="220"
          ></el-table-column>
          <!-- <el-table-column
          prop="reason"
          label="预警原因"
          align="center"
          :formatter="formatTd"
          min-width="15%"
        ></el-table-column> -->
          <el-table-column label="预警原因" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.reason"
                :columnName="'reason'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="alertTime"
            label="预警时间"
            align="center"
            :formatter="formatTd"
            min-width="140"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            v-if="isCzUser()"
            prop="removeTime"
            label="消除时间"
            align="center"
            :formatter="formatTd"
            min-width="140"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            prop="isPunishedValue"
            label="处罚情况"
            align="center"
            :formatter="formatTd"
            min-width="120"
          ></el-table-column>
          <el-table-column
            prop="statusDesc"
            label="状态"
            align="center"
            :formatter="formatTd"
            min-width="120"
          ></el-table-column>
          <el-table-column
            prop="gridAlertStatusDesc"
            label="网格中心处理情况"
            v-if="isEsUser() && roleHandle"
            align="center"
            :formatter="formatTd"
            min-width="180"
          ></el-table-column>
          <el-table-column
            prop="inspectionTime"
            label="网格中心处理时间"
            v-if="isEsUser() && roleHandle"
            align="center"
            :formatter="formatTd"
            min-width="180"
          ></el-table-column>
          <el-table-column
            prop="handleTypeValue"
            label="处理方式"
            align="center"
            min-width="160"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column label="操作" align="left" fixed="right" width="160">
            <template slot-scope="scope">
              <!-- <el-link type="primary" @click="handleAlert(scope.$index, scope.row,'detail')" v-show="isShowDetail">查看详情</el-link>
            <el-link type="primary" @click="handleAlert(scope.$index, scope.row,'handle')" v-show="scope.row.isOauth && scope.row.isShow && isShowUpdate">处理</el-link>
            <el-link type="primary" @click="toInform(scope.$index, scope.row)" v-show="!scope.row.isOauth && scope.row.isShow && isShowAdd">通知</el-link> -->
              <div
                v-if="
                  isShowDetail ||
                  (scope.row.isOauth && scope.row.isShow && isShowUpdate) ||
                  (!scope.row.isOauth && scope.row.isShow && isShowAdd)
                "
              >
                <el-link
                  type="primary"
                  @click="handleAlert(scope.$index, scope.row, 'detail')"
                  v-show="isShowDetail"
                  >查看详情</el-link
                >
                <el-link
                  type="primary"
                  @click="handleAlert(scope.$index, scope.row, 'handle')"
                  v-show="scope.row.isOauth && scope.row.isShow && isShowUpdate"
                  >处理</el-link
                >
                <el-link
                  type="primary"
                  @click="toInform(scope.$index, scope.row)"
                  v-show="!scope.row.isOauth && scope.row.isShow && isShowAdd"
                  >通知</el-link
                >
              </div>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageSize="getpageSize"
          @getpageNo="getpageNo"
        ></Pagination>
      </div>
    </div>
    <!-- 通知弹窗 -->
    <el-dialog
      title="发送预警通知"
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      @close="cancel('formData')"
      custom-class="brand-dialog-min-width oneColumnDialog"
      :modal-append-to-body="false"
      width="640px"
      :append-to-body="true"
    >
      <el-form
        :model="informFormData"
        :rules="formRules"
        ref="informFormData"
        label-width="120px"
      >
        <el-form-item label="通知类型：" prop="noticeType" class="noticeType">
          <!-- <el-radio-group v-model="informFormData.noticeType">
                          <el-radio :label="item.code" :key="item.code" v-for="item in noticeTypeData">{{item.text}}</el-radio>
                        </el-radio-group> -->
          <el-checkbox-group v-model="informFormData.noticeType">
            <el-checkbox
              :label="item.code"
              :key="item.code"
              v-for="item in noticeTypeData"
              >{{ item.text }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="通知内容：" prop="noticeContentRadio">
          <el-radio-group
            v-model="informFormData.noticeContentRadio"
            @change="changeRadio"
            class="noticeContentRadioBox"
          >
            <el-radio :label="noticetContentData">{{
              noticetContentData
            }}</el-radio>
            <el-radio label="0" :disabled="!choseMsg">自定义</el-radio>
          </el-radio-group>
          <!-- <el-radio-group v-model="informFormData.noticeContentRadio" @change="changeRadio" v-if="!choseMsg" class="noticeContentRadioBox"> 
                          <el-radio :label="noticetContentData">{{noticetContentData}}</el-radio> 
                        </el-radio-group> -->
          <el-form-item prop="noticeContent">
            <el-input
              type="textarea"
              maxlength="70"
              show-word-limit
              rows="3"
              :disabled="disabledRadio || !choseMsg"
              :placeholder="
                choseMsg
                  ? '请输入通知的内容，最多70个字'
                  : '短信通知不支持自定义'
              "
              v-model="informFormData.noticeContent"
            >
            </el-input>
          </el-form-item>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancel('formData')" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="toSaveInform('formData')"
          class="save"
          :loading="canLogin"
          v-sdc
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 消除预警 -->
    <el-dialog
      title="批量消除预警"
      :visible.sync="eliminateAlertAble"
      @close="closeDialog('eliminateBox')"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      class="dialogSty"
      width="640px"
    >
      <p class="warningInfo">
        <i class="el-icon-warning warningIcon"></i>
        <span class="warningText"
          >请核实项目是否如实按照相关规定处理预警。消除后，该项目本次预警将不会再次生成。</span
        >
      </p>
      <el-form
        :model="eliForm"
        :rules="ruleEliminate"
        class="mrT8"
        ref="eliminateBox"
        style="padding: 16px 24px"
      >
        <el-form-item
          label="消除原因："
          :label-width="formLabelWidth"
          prop="handleReason"
          style="margin-bottom: 30px"
        >
          <el-input
            type="textarea"
            placeholder="请填写消除原因，不超过100字。"
            v-model="eliForm.handleReason"
            maxlength="100"
            show-word-limit
            rows="3"
          ></el-input>
        </el-form-item>
        <!-- <el-row style="margin: -10px 0 15px 40px;">请核实项目是否如实按照相关规定处理预警。消除后，该项目本次预警将不会再次生成。</el-row> -->
      </el-form>
      <div div slot="footer" class="dialog-footer">
        <el-button @click.native="closeDialog('eliminateBox')" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveEli"
          v-sdc
          :loading="isSaveLoading"
          class="save"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      title="预警消除权限"
      :visible.sync="privilegeDialog"
      class="tipDialog"
      width="420px"
      @close="privilegeDialog = false"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
    >
      <span style="color: #f59e2d">您的账号有以下预警的消除权限：</span>
      <div v-for="(item, index) in rps" style="margin-top: 10px" :key="index">
        <span style="font-weight: bold; color: #333">{{ item.name }}：</span
        ><span style="color: #6f6f6f">{{ item.value.toString() }}</span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import scrollTable from '@/mixin/scrollTable.js'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'constructAlertProjectList',
  mixins: [scrollTable],
  data() {
    var checkNoticeContent = (rule, value, callback) => {
      var that = this
      if (
        !that.informFormData.noticeContentRadio ||
        (that.informFormData.noticeContentRadio == '0' &&
          !that.informFormData.noticeContent)
      ) {
        return callback(new Error('请输入通知的内容'))
      } else {
        callback()
      }
    }
    //验证消除原因
    var validateType = (rule, value, callback) => {
      if (value.trim() === '') {
        callback(new Error('消除原因不能为空'))
      } else {
        if (value.length > 100) {
          callback(new Error('消除原因不能超过100字'))
        } else {
          callback()
        }
      }
    }
    return {
      titleText: '预警明细',
      advanced: false,
      roleHandle: false, //标识监察还是企业用户登录，false为企业
      //查询条件数据封装
      industryIdOptions: [],
      stateOptions: [],
      typeOptions: [],
      isPunishOptions: [],
      wayOptions: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      //表格数据
      tableList: [],
      requestUrl: '',
      isShow: false, //列表加载
      loading: true,
      dateValue: [],
      areaId: '',
      filterField: {
        sysAppCode: localStorage.getItem('judgeRoleCode'),
        projectId: '',
        projectName: '',
        status: '',
        typeId: '',
        isPunished: '',
        handleType: '',
        effectiveStartDate: '',
        effectiveEndDate: '',
        areaId: '',
        id: '',
        industryId: '', //行业
        projectStatus: '', //新增开
        serverArea: '', // 服务部署区域
        gridAlertStatus: '',
      },
      pageSize: 20,
      pageNo: 1,
      loginType: '', //登录类型
      projectId: '',
      //通知
      formVisible: false,
      informFormData: {
        noticeContent: '',
        noticeType: [],
        alertId: '',
        noticeContentRadio: '',
      },
      formLabelCardWidth: '125px',
      canLogin: false,
      formRules: {
        noticeType: [
          {
            required: true,
            message: '通知类型不能为空',
            trigger: 'change',
          },
        ],
        noticeContent: [
          {
            required: true,
            validator: checkNoticeContent,
            // pattern: /^\d{15,19}$/,
            // message: "通知内容不能为空",
            trigger: 'change',
          },
        ],
      },
      disabledRadio: false,
      noticeContent: '',
      otherNoticeContent: '',
      noticeTypeData: [],
      noticetContentData: '',
      isShowAdd: '',
      isShowDetail: '',
      isShowUpdate: '',
      isShowDelete: '',
      multipleSelection: [], //当前选中项
      eliminateAlertAble: false, //消除预警弹框
      formLabelWidth: '120px',
      eliForm: {
        handleReason: '',
      },
      ruleEliminate: {
        handleReason: [
          {
            required: true,
            validator: validateType,
            trigger: 'blur',
          },
        ],
      },
      newAlertArr: [], //过滤后的预警数组
      isSaveLoading: false, // 批量消除预警保存loading
      privilegeDialog: false,
      rps: [],
      api: '',
      startTimeTitleTwo: '',
      endTimeTitleTwo: '',
      girdStatusList: [],
    }
  },
  computed: {
    ...mapState(['areasOptions', 'industryOptions', 'statusOptions']),
  },
  created() {
    this.$store.state.activeMenu = '/home/project/constructAlertProjectList'

    this.loginType = localStorage.getItem('loginType')

    //依据登录页逻辑判断登录用户类型
    if (localStorage.length > 0) {
      //判断监察还是企业用户登录
      if (
        localStorage.getItem('loginType') === 'QY' ||
        localStorage.getItem('loginType') === 'XM'
      ) {
        this.requestUrl = 'api-a/cs/alert/expand/company/listbypage'
        if (localStorage.getItem('loginType') === 'QY') {
          this.roleHandle = true
          this.api = 'api-s/report/export_QY_ALERT'
        } else {
          this.roleHandle = false
          this.api = 'api-s/report/export_XM_ALERT'
        }
      } else {
        this.roleHandle = true
        this.requestUrl = 'api-a/cs/alert/expand/monitor/listbypage'
        this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
        this.api = 'api-s/report/export_JC_CS_ALERT'
      }
    } else {
      this.roleHandle = true
      this.requestUrl = 'api-a/cs/alert/expand/monitor/listbypage'
      this.api = 'api-s/report/export_JC_CS_ALERT'
    }

    this.getStateData('api-bs/base/dicitem/findbytype', {
      type: 'CS_ALERT_STATE',
    }) //处理状态下拉框
    this.getTypeData('api-bs/base/dicitem/findbytype', {
      type: 'CS_ALERT_TYPE',
    }) //预警类型下拉框
    this.getPunishData('api-a/cs/alert/expand/ispunish') //处罚情况下拉框
    this.getHandelWay('api-bs/base/dicitem/findbytype', {
      type: 'CS_ALERT_HANDLE_TYPE',
    }) //处理方式下拉框
    //获取行业
    this.getIndustry({})
    this.getStatus({})
    //获取通知类型
    this.getNoticetype()
    this.filterField.serverArea = this.$store.state.areaInfoArr.areaId
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('csAlert:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csAlertSGF:add') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csAlertJSF:add') > -1
    this.isShowDetail =
      this.$store.state.buttonLimitsArr.indexOf('csAlert:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csAlertSGF:detail') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csAlertJSF:detail') > -1
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('csAlert:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csAlertSGF:update') > -1 ||
      this.$store.state.buttonLimitsArr.indexOf('csAlertJSF:update') > -1
    this.isShowDelete =
      this.$store.state.buttonLimitsArr.indexOf('csAlert:delete') > -1
  },
  mounted() {
    if (this.$route.query.ischuzhou) {
      if (this.$route.query.alertType) {
        this.filterField.typeId = this.$route.query.alertType
        this.$refs.pagination.getTableListData()
      } else if (this.$route.query.areaId) {
        this.areaId = this.$route.query.areaId
        this.filterField.areaId = this.$route.query.areaId
        this.$refs.pagination.getTableListData()
      }
    } else {
      this.getAlerts()
    }

    $('.reminder').css({ height: $('#heightBox').css('height') })

    //滁州定制化需求 （5-8月 需求41）
    if (this.isCzUser()) {
      //   removeTimeStart: '',
      // removeTimeEnd: '',
      this.$set(this.filterField, 'removeTimeStart', '')
      this.$set(this.filterField, 'removeTimeEnd', '')
      if (this.$route.query.projectName) {
        this.filterField.projectName = this.$route.query.projectName
      }
      if (this.$route.query.status) {
        this.filterField.status = this.$route.query.status
      }
      if (this.$route.query.removeTimeStart) {
        this.filterField.removeTimeStart = this.$route.query.removeTimeStart
        this.startTimeTitleTwo = this.$route.query.removeTimeStart
      }
      if (this.$route.query.removeTimeEnd) {
        this.filterField.removeTimeEnd = this.$route.query.removeTimeEnd
        this.endTimeTitleTwo = this.$route.query.removeTimeEnd
      }
    }

    if (this.isEsUser()) {
      this.getGirdList()
      this.filterField.effectiveStartDate = this.$route.query.effectiveStartDate
      this.filterField.effectiveEndDate = this.$route.query.effectiveEndDate
      this.filterField.projectStatus = this.$route.query.projectStatus
      this.filterField.status = this.$route.query.status
    }
    window.addEventListener('scroll', this.handleScroll, true)
    let that = this
    this.$nextTick(function () {
      let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
      let tableTop = this.$refs.tableBox.getBoundingClientRect().top
      if (tableHeightCur + tableTop > window.innerHeight) {
        this.tableHeight =
          this.$refs.mainCon.getBoundingClientRect().height - 126
      } else {
        document.getElementsByClassName('tableBoxCur').length &&
          (document.getElementsByClassName('tableBoxCur')[0].style.height =
            window.innerHeight - tableTop - 68 + 'px')
      }

      window.onresize = function () {
        if (!that.$refs.tableBox1) {
          return
        }
        let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
        let tableTop = that.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          that.tableHeight =
            that.$refs.mainCon.getBoundingClientRect().height - 126
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 68 + 'px')
        }
      }
    })
  },
  watch: {
    $route(to, from) {
      if (to.name == 'constructAlertProjectList') {
        this.getAlerts()
      }
    },
    choseMsg(val) {
      if (!val) {
        this.informFormData.noticeContentRadio = this.noticetContentData
        this.informFormData.noticeContent = ''
      } else {
        this.informFormData.noticeContentRadio = ''
        this.informFormData.noticeContent = ''
      }
    },
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
      this.$refs.tableBox1.doLayout()
    })
    window.addEventListener('scroll', this.handleScroll, true)
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  computed: {
    ...mapState(['areasOptions', 'industryOptions', 'statusOptions']),
    getMsgCode() {
      if (this.noticeTypeData.length) {
        let str = ''
        this.noticeTypeData.forEach((item) => {
          if (item.text == '短信通知') {
            str = item.code
          }
        })
        return str
      }
      return ''
    },
    choseMsg() {
      let arr = this.informFormData.noticeType
      if (arr.length && arr.includes(this.getMsgCode)) {
        return false
      }
      return true
    },
  },
  methods: {
    handleScroll(e) {
      this.$nextTick(function () {
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          // this.tableHeight = this.$refs.mainCon.getBoundingClientRect().height - 84
          this.tableHeight = window.innerHeight - 286

          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    ...mapActions(['getAreas', 'getIndustry', 'getStatus']),
    getRemoveStartTime(val) {
      if (val) {
        this.filterField.removeTimeStart = val
      } else {
        this.filterField.removeTimeStart = ''
      }
    },
    getRemoveEndTime(val) {
      if (val) {
        this.filterField.removeTimeEnd = val
      } else {
        this.filterField.removeTimeEnd = ''
      }
    },
    /**
     * @description: 获取开始日期
     * @param {*} urls
     * @param {*} datas
     */
    getStartTimeValue(val) {
      if (val) {
        this.filterField.effectiveStartDate = val
      } else {
        this.filterField.effectiveStartDate = ''
      }
    },
    /**
     * @description: 获取结束日期
     * @param {*} urls
     * @param {*} datas
     */
    getEndTimeValue(val) {
      if (val) {
        this.filterField.effectiveEndDate = val
      } else {
        this.filterField.effectiveEndDate = ''
      }
    },
    changeRadio() {
      if (this.informFormData.noticeContentRadio != '0') {
        this.disabledRadio = true
        this.informFormData.noticeContent = ''
      } else {
        this.disabledRadio = false
        this.informFormData.noticeContent = ''
      }
    },
    getAlerts() {
      //建筑端，企业端项目详情预警跳转（传项目id，预警id,未处理）
      var that = this
      if (Object.keys(this.$route.query).length > 0) {
        const { status, alertId, projectId, projectName, alertType, areaId } =
          this.$route.query
        this.filterField.status = status ? status : ''
        this.filterField.id = alertId ? alertId : ''
        this.filterField.projectId = projectId ? projectId : ''
        this.filterField.projectName = projectName ? projectName : ''
        this.filterField.typeId = alertType ? alertType : ''
        this.areaId = areaId ? areaId : ''
        this.filterField.areaId = this.areaId
        //监察首页跳转带入已开工状态
        this.filterField.projectStatus = this.$route.query.projectStatus
          ? this.$route.query.projectStatus
          : ''
        this.$nextTick(function () {
          that.$refs.pagination.getTableListData()
        })
      } else {
        this.$nextTick(function () {
          that.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
        })
      }
    },
    getStateData(urls, datas) {
      this.axios({
        method: 'post',
        url: urls,
        data: datas,
      })
        .then((resp) => {
          this.stateOptions = resp.data.result
        })
        .catch((resp) => {})
    },
    getTypeData(urls, datas) {
      this.axios({
        method: 'post',
        url: urls,
        data: datas,
      })
        .then((resp) => {
          this.typeOptions = resp.data.result
        })
        .catch((resp) => {})
    },
    getPunishData(urls) {
      this.axios({
        method: 'post',
        url: urls,
      })
        .then((resp) => {
          this.isPunishOptions = resp.data
        })
        .catch((resp) => {
          this.$message.error('数据获取失败')
        })
    },
    getHandelWay(urls, datas) {
      this.axios({
        method: 'post',
        url: urls,
        data: datas,
      })
        .then((resp) => {
          this.wayOptions = resp.data.result
        })
        .catch((resp) => {})
    },
    handleAlert(index, row, type) {
      // isHandle  详情为false,处理为true
      var isHandle = ''
      if (type == 'detail') {
        isHandle = false
      } else {
        isHandle = true
      }
      var query = {}
      if (this.roleHandle === true) {
        query = { alertId: row.id, isShow: 'yes', type }
      } else {
        query = {
          alertId: row.id,
          isShow: 'no',
          projectId: this.filterField.projectId,
          isHandle: isHandle,
          type,
        }
      }
      this.$router.push({
        path: '/home/project/constructAlertDetail',
        name: 'constructAlertDetail',
        query: query,
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/constructAlertProjectList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      //点击查询清空预警id
      this.filterField.id = ''
      var that = this
      this.$nextTick(function () {
        that.$refs.pagination.getTableListData()
      })
    },
    getNoticetype() {
      this.axios({
        method: 'post',
        url: 'api-a/cs/alert/expand/findnoticetype',
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.noticeTypeData = res.data.result
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 1000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
    getNoticecontent(id) {
      this.axios({
        method: 'post',
        url: 'api-a/cs/alert/expand/findnoticetcontent',
        data: {
          alertId: id,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.noticetContentData = res.data.result
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 1000,
            message: '获取数据失败',
            type: 'error',
          })
        })
    },
    // 通知
    toInform(index, item) {
      const vm = this
      vm.formVisible = true
      vm.informFormData.alertId = item.id
      vm.disabledRadio = false
      vm.informFormData.noticeContentRadio = ''
      vm.getNoticecontent(item.id)
      vm.$nextTick(function () {
        vm.$refs['informFormData'].resetFields()
      })
    },
    cancel(formData) {
      this.$refs['informFormData'].resetFields()
      this.formVisible = false
    },
    saveInform() {
      if (this.informFormData.noticeContentRadio != '0') {
        this.informFormData.noticeContent =
          this.informFormData.noticeContentRadio
      }
      //监察端和企业端都有 通知功能，不同的端请求不同的接口
      let str = window.localStorage.getItem('loginType')
      let params = JSON.parse(JSON.stringify(this.informFormData))
      params.noticeType = params.noticeType.join(',')

      this.axios({
        method: 'post',
        url:
          str == 'JC' || str == 'BANK'
            ? 'api-a/cs/alert/expand/sendnoticenew'
            : 'api-a/cs/alert/expand/sendnotice',
        data: params,
      })
        .then((res) => {
          if (!res.data.hasError) {
            this.$message({
              message: '通知成功',
              type: 'success',
            })
            this.formVisible = false
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: res.data.errorMsg,
              type: 'error',
            })
          }
          this.canLogin = false
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            duration: 1000,
            message: '获取数据失败',
            type: 'error',
          })
          this.canLogin = false
        })
    },
    toSaveInform() {
      this.$refs.informFormData.validate((valid) => {
        if (valid) {
          if (this.informFormData.noticeContentRadio != '0') {
            this.informFormData.noticeContent = this.noticeContent
          }
          this.canLogin = true
          this.saveInform()
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      //未处理及处理中才可以批量消除预警
      // this.newAlertArr = val.filter(item => item.statusDesc != '已处理');
    },
    //批量消除预警
    goEliminateAlert() {
      this.newAlertArr = this.multipleSelection.filter(
        (item) => item.statusDesc != '已处理'
      )
      //未选中任何预警时
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请选择需要批量消除的预警',
          type: 'warning',
          duration: 2000,
        })
        return
      } else {
        //仅可处理未处理和处理中预警
        if (this.multipleSelection.length > this.newAlertArr.length) {
          this.$message({
            message: '仅可批量消除未处理及处理中的预警，请勿选择已处理的预警',
            type: 'warning',
            duration: 2000,
          })
          return
        } else {
          this.eliminateAlertAble = true
        }
      }
    },
    closeDialog(ele) {
      this.$refs['eliminateBox'].resetFields()
      this.eliminateAlertAble = false
    },
    //网格处理状态列表
    getGirdList() {
      this.axios.post('api-a/cs/alert/expand/gridAlertStatus').then((res) => {
        if (!res.data.hasError) {
          this.girdStatusList = res.data.result
        }
      })
    },
    // 分配至网格处理中心
    toBirdCenter() {
      //未选中任何预警时
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请选择需要分配至网格中心处理的预警数据',
          type: 'warning',
          duration: 2000,
        })
        return
      } else {
        // api-a/cs/alerthandle/expand/monitor/addGridAlertBatch
        let curArr = []
        this.multipleSelection.forEach((item) => {
          curArr.push(item.id)
        })
        this.$confirm(
          '请确认该数据是否需要分配至网格中心进行落实，分配后无法撤销',
          '提示',
          {
            cancelButtonClass: 'btn-custom-cancel',
            type: 'warning',
          }
        )
          .then(() => {
            this.axios
              .post('api-a/cs/alerthandle/expand/monitor/addGridAlertBatch', {
                alertIds: JSON.stringify(curArr),
              })
              .then((res) => {
                if (!res.data.hasError) {
                  this.$message({
                    type: 'success',
                    message: '分配成功',
                  })
                  this.multipleSelection = []
                  this.searchList()
                } else {
                  this.$message({
                    type: 'warning',
                    message: res.data.errorCode,
                  })
                }
              })
          })
          .catch(() => {})
      }
    },
    //消除预警
    saveEli() {
      this.$refs['eliminateBox'].validate((valid) => {
        if (valid) {
          this.isSaveLoading = true
          this.toDelete()
        } else {
          return false
        }
      })
    },
    toDelete() {
      var alertIdArr = []
      this.newAlertArr.forEach(function (item) {
        if (item.id) {
          alertIdArr.push(item.id)
        }
      })
      this.axios({
        method: 'post',
        url: 'api-a/cs/alerthandle/expand/monitor/removeAlertBatch',
        data: {
          alertIds: JSON.stringify(alertIdArr),
          handleReason: this.eliForm.handleReason.trim(),
        },
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '批量消除成功',
            })
            this.eliminateAlertAble = false
            this.$nextTick(function () {
              this.$refs.pagination.getTableListData()
            })
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.isSaveLoading = false
          }
        })
        .catch((error) => {
          this.$message.error('保存失败')
          this.isSaveLoading = false
        })
    },
    showPrivilege() {
      this.axios.post('api-a/cs/alert/expand/removePower').then((response) => {
        if (!response.data.hasError) {
          this.rps = response.data.result
          this.privilegeDialog = true
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  padding-top: 40px;
}
/deep/.gridLabel {
  .el-form-item__label {
    line-height: 18px;
  }
}
.esGrid {
  margin-bottom: 24px;
}
.tipBar {
  margin-top: -24px;
  margin-left: -24px;
  margin-right: -24px;
  height: 67px;
  background-color: #e4ebf1;
  font: bold 18px/67px Microsoft YaHei;
  /deep/.el-input__inner {
    font: bold 24px Microsoft YaHei;
    color: #333333;
    border: none;
    height: 30px;
    background: #e4ebf1;
    margin-top: 18px;
    margin-left: -11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /deep/.el-select__caret {
    color: #333;
    font-size: 20px;
    line-height: 30px;
    margin-top: -1px;
  }
}
.title {
  padding-left: 4px;
  padding-top: 10px;
  margin-bottom: -10px;
  font: bold 18px/50px Microsoft YaHei;
}

.reminderBox {
  padding: 0 24px;
  ul {
    font-size: 0;
    margin-bottom: 36px;
    li {
      // display: inline-block;
      float: left;
      width: 20%;
      position: relative;
      padding: 0 10px;
      height: 100%;
      span {
        display: inline-block;
        text-align: center;
        background: #3c3d49;
        color: #fff;
        height: 22px;
        line-height: 22px;
        width: 22px;
        font-size: 14px;
        border-radius: 50%;
        margin-right: 10px;
        position: absolute;
        top: 50%;
        margin-top: -11px;
        left: 10px;
      }
      // img{
      //   width: calc(100% - 10px);
      //   display: inline-block;
      //   position: absolute;
      //   top: 50%;
      //   margin-top: -10px;
      //   left: 10px;
      //   // right: 50px;
      // }
      div {
        position: absolute;
        left: 40px;
        top: 50%;
        // margin-top: -50%;
        transform: translateY(-50%);
        font-size: 14px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }
}
.arrowRight {
  text-align: center;
  line-height: 100%;
  background: url('./../../../static/img/icon1.png') center repeat-x;
}
.arrowRight img {
  vertical-align: middle;
  height: 14px;
  width: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -7px;
  margin-left: -5px;
}

.noticeType {
  margin-bottom: 12px;
}

.noticeContentRadioBox {
  width: 100%;
  margin-top: 10px;
  label {
    display: flex;
    // line-height: 36px;
    margin-bottom: 22px;
  }
  label:nth-of-type(2) {
    margin-bottom: 10px;
  }
  /deep/.el-radio__label {
    word-break: break-all;
    white-space: normal;
    line-height: 20px;
    width: 390px;
    // margin-bottom: -2px;
  }
  /deep/.el-radio__input {
    margin-top: 3px;
  }
}

.warningInfo {
  background: #fffbe6;
  height: 36px;
  padding-left: 46px;
  position: relative;
  .warningIcon {
    color: orange;
    font-size: 20px;
    position: absolute;
    top: 8px;
    left: 20px;
  }
  .warningText {
    font-family: 'SourceHanSansCN-Regular';
    font-size: 14px;
    color: #ff4d4a;
    line-height: 36px;
  }
}
.dialogSty /deep/ .el-dialog__body {
  padding: 0 !important;
}
@import '../../../static/css/filterArea.less';
</style>
